h1 {
text-align: center;
}

h2 {
text-align: center;

}
.textbodyparagrahindented {
text-indent: 50px;
}
.wrapper {
width: 95%;
margin-inline: auto;
} 
/* // I'm pretty sure a lot of things broke right now.  */
.grid-container {
display: grid;
grid-template-areas:
"header header header header header"
"sbhead sbhead sbhead sbhead sbhead"
"aside-one main main main aside-two"
"aside-one main main main aside-two"
"footer footer footer footer footer";
min-height: 80vh;
margin-top: 4rem;
gap: 1.15rem;
}
.grid-item {

padding: 1rem;
margin: 0rem;
}
.header {
background-color: #d4e2eb;
grid-area: header;
display: grid;

}
a:visited {
color: black;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
.griditemsasidelefttextdrasideleft:hover {
transform: scale(1.08);
color: black;
text-decoration: none;
}

.griditemsasidelefttextdrasideleft:visited {
color: black;
text-decoration: none;
}


#tableasideleft {
vertical-align: top;
}
.contentouter {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
background-color: #e6e6fa;
margin: 1vh;
padding: 1vh;


}
.containeroverouter {
width: 98%;
background-color: #ffffff;
}
*, *::before, *::after 
{
text-wrap: wrap;font-size: 1vw;font-weight: 600;box-sizing: border-box;font-family: 'Cinzel', "Century Schoolbook","Times New Roman", Times, Courier,"Georgia", serif;text-decoration: none;
}

body {
background-color: #fae7d4;
color:  #000000;
transition: all 0.4s ease-in;
}

h1 {
text-align: center;
margin-top: 1.25rem;
}

.colortogglecontainer {
margin-top: 0.70rem;
display: grid;
grid-template-areas:"mode-status slider" ;
width: 100%;
place-content: center;
gap: 1rem;
text-align: left;
}



.toggle-switch {
position: relative;
display: inline-block;
width: 3.75rem;
height: 2.13rem;
margin-bottom: 0.1rem;
margin-inline: left;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #aad9ff;;
transition: all 0.4s ease-in;
border-radius: 2.13rem; 
} 

.slider:before {
position: absolute;
content: "";
height: 1.63rem;
width: 1.63rem;
left: 0.25rem;
bottom: 0.25rem;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}   

input:checked + .slider {
background-color: #ccc;

}

input:focus + .slider {
background-color: #aad9ff;


}

input:checked:focus + .slider {
background-color: #ccc;

}



input:checked + .slider:before {
transform: translateX(1.63rem);
}

.footer {
text-align: center;
background-color: #ffefea;
grid-area: footer;
display: grid;
grid-template-areas:
"toptablerow"
"bottomtablerow"
"bottomtablerow2";
place-items: center;
}


.mainpll {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#form-submitted-msg {
margin-top: 2rem;
border-radius: 3px;
background-color: rgb(163, 199, 163);
padding: 0.5rem;
width: 100%;
height: auto; 
aspect-ratio: 10.05 / 4.16;
text-align: center;
color: #fff;
display: none;
}

#exampleForm {
width: 100%;
}
.exampleFormA {
color:red;
font-size: smaller;

}



.input-group {
margin-bottom: 1.5rem;
}

.input-group:not(.radio):not(.checkbox) {
gap: 0.25rem;
flex-direction: column;
}

.input-group:not(.radio):not(.checkbox) input {
width: 100%;
border-radius: 0.375rem !important;
}

.input-group.checkbox {
gap: 1rem;
}

.input-group.radio {
display: flex;
gap: 1.5rem;
width: 100%;
}

.input-group.select select {
width: 100%;
}

legend {
font-size: 1rem;
width: max-content;
}

.form-btns {
display: flex;
width: 100%;
gap: 1rem;
margin-top: 2.5rem;
}

.form-btns > button {
padding: 0.3rem 1.5rem;
}

.form-btns > .submit {
padding-inline: 3rem;
}

.error-msg {
display: none;
}

.fontweightadjustment{ font-weight: 600; }

.questionsbeingasked{font-weight: 750;}

.feedback {

padding-left: 1vh;

}

.correct-answer {

color: black;
}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&display=swap');
.divchestnutandhazellandingpageheaderbutton {
font-size: 4vw;
text-align: center;
vertical-align: middle;
}
#centerheadertextbutton {
text-align: center;
vertical-align: middle;

}






button:not(#modalbutton1):not(#modalbutton2) {
border-style: outset;
border-width: thick;
width: auto;
border-color: silver;
padding: 5px 5px;
}
button:hover:not(#modalbutton1):not(#modalbutton2) {
border-style: inset;
border-width: thick;
width: auto;
border-color: silver;
padding: 5px 5px;
}
#submitinformationcontactbutton {
border-style: outset;
border-width: thick;
padding: 1px 1px;
width: auto;
border-color: silver;
}
#submitinformationcontactbutton:hover {
border-style: inset;
border-width: thick;
padding: 1px 1px;
width: auto;
border-color: silver;
}



h1 {
text-align: center;
}

h2 {
text-align: center;

}


.textbodyparagrahindented {
text-indent: 50px;
}



.wrapper {
width: 95%;
margin-inline: auto;
}

.grid-container {
display: grid;
grid-template-areas:
"header header header header header"
"sbhead sbhead sbhead sbhead sbhead"
"aside-one main main main aside-two"
"footer footer footer footer footer";
margin-top: 2rem;
gap: 1.15rem;
}

.grid-item {

padding: 1rem;
margin: 0rem;
}


.header {
background-color: #d4e2eb;
grid-area: header;
display: grid;
grid-template-areas: 
"headerbuttonleft headerbuttoncenter headerbuttoncenter headerbuttonright"
" subheadercenterheadertextbutton subheadercenterheadertextbutton subheadercenterheadertextbutton subheadercenterheadertextbutton";
grid-template-columns: 1fr 5fr 1fr;
}





a:visited {
color: black;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
.griditemsasidelefttextdrasideleft:hover {
transform: scale(1.08);
color: black;
text-decoration: none;
}

.griditemsasidelefttextdrasideleft:visited {
color: black;
text-decoration: none;
}


#tableasideleft {
vertical-align: top;
}




.contentouter {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
background-color: #e6e6fa;
margin: 1vh;
padding: 1vh;


}

.sidebarouter {
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
background-color: #ffdfbe;
padding: 1vh;
}

.containeroverouter {
width: 98%;
background-color: #ffffff;
}

*, *::before, *::after {
font-size: 1vw;font-weight: 600;box-sizing: 
border-box;font-family: 
'Cinzel', "Century Schoolbook","Times New Roman", Times, Courier,"Georgia", serif;
text-decoration: none;
}

body {
background-color: #fae7d4;
color:  #000000;
transition: all 0.4s ease-in;
}

h1 {
text-align: center;
margin-top: 1.25rem;
}

.colortogglecontainer {
margin-top: 0.70rem;
display: grid;
grid-template-areas:"mode-status slider" ;
width: 100%;
place-content: center;
gap: 1rem;
text-align: left;
}


/* Active - Delete Duplicates */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100;0,8..144,200;0,8..144,300;0,8..144,400;0,8..144,500;0,8..144,600;0,8..144,700;0,8..144,800;0,8..144,900;1,8..144,100;1,8..144,200;1,8..144,300;1,8..144,400;1,8..144,500;1,8..144,600;1,8..144,700;1,8..144,800;1,8..144,900&display=swap');
.toggle-switch {
position: relative;
display: inline-block;
width: 3.75rem;
height: 2.13rem;
margin-bottom: 0.1rem;
margin-inline: left;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #aad9ff;
;
transition: all 0.4s ease-in;
border-radius: 2.13rem;
}

.slider:before {
position: absolute;
content: "";
height: 1.63rem;
width: 1.63rem;
left: 0.25rem;
bottom: 0.25rem;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}

input:checked+.slider {
background-color: #e6aaaa;

}

input:focus+.slider {
background-color: #aad9ff;


}

input:checked:focus+.slider {
background-color: rgb(253, 245, 247);

}



input:checked+.slider:before {
transform: translateX(1.63rem);
}



.dark-mode {
background-color: #ec9f9f;
color: #000000;
transition: all 0.4s ease-in;
}

.dark-modefields {
background-color: #c5a8c5;
color: #000000;
transition: all 0.4s ease-in;
}

.dark-modebsbuttons {
background-color: silver;
border-color: gray;
color: #000000;
transition: all 0.4s ease-in;
}

.dark-mode {
background-color: #ec9f9f;
color: #000000;
transition: all 0.4s ease-in;
}

.dark-modefields {
background-color: #ffc0cb;
color: #000000;
transition: all 0.4s ease-in;
}
.dark-modefieldsalr {
    background-color: rgb(173, 84, 126) !important;
    color: #000000;
    transition: all 0.4s ease-in;
    }

.dark-modebsbuttons {
background-color: silver;
border-color: gray;
color: #000000;
transition: all 0.4s ease-in;
}

.main {
grid-area: main;
background-color: #ecdec9;
padding: 3.9vh;
vertical-align: top;
width: 100%;
height: auto;
display: grid;
}

#sliderproject10 {
height: auto;
aspect-ratio: 680/900;
position: relative;
}

#sliderproject10 iframe {
position: absolute;
height: auto;
aspect-ratio: 680/900;
opacity: 0;
transition: all 1s ease-in-out;
}

#sliderproject10 iframe.active {
opacity: 1;
}

.aside-one {
grid-area: aside-one;
background-color: #cffdbc;
vertical-align: top;
}

.aside-one:hover {
vertical-align: top;
}

.aside-two {
grid-area: aside-two !important; ;
background-color: #ffffbf;
vertical-align: top;
}

.aside-two:hover {
vertical-align: top;
}

iframe {
margin: 1vh 1vh 1vh 1vh;
padding: 1vh 1vh 1vh 1vh;
width: 100%;
height: auto;
aspect-ratio: 50/70;
}
.footer {
text-align: center;
background-color: #ffefea;
grid-area: footer;
display: grid;
grid-template-areas:
"toptablerow"
"bottomtablerow"
"bottomtablerow2";
place-items: center;
}

/* Active - Delete Duplicates */ 
.usernamedisplay{color: rgb(1, 2, 3);}

.EGdark-mode{color: rgb(17, 17, 18);}
.jmEGdark-mode{color: rgb(17, 16, 16);}
.msjmEGdark-mode{color: rgb(15, 16, 15);}
.connectionname{width: 100%;display: flex;justify-content: center;column-gap: 1vh;}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap */
.subheadercenterheadertextbutton {
text-align: center;
vertical-align: middle;
grid-area: sbhead;
background-color: #ffefea;
padding: 2vh;
font-size: 3vh;
/* width: 100%;display: flex;justify-content: center;column-gap: 1vh; */
}

/* list-style-type: none */
.carousel-indicators{list-style-type: none;}

    #containermyCarousel {
    color:olivedrab;
    vertical-align: middle;
    }
    
    #containermyCarousel h2 {
    position: absolute;
    height: auto;
    aspect-ratio: 680/900;
    opacity: 0;
    transition: all 1s ease-in-out;
    vertical-align: middle;
    }
    
    #sliderproject10 h2.active {
    opacity: 1;
    vertical-align: middle;
    }
#prevproject10{grid-area: aside-one !important; 
width: auto !important;
   padding: 3rem!important;     opacity: 1!important;}
#nextproject10{grid-area: aside-two !important;;
width: auto !important;
    padding: 3rem!important;     opacity: 1 !important;}


    #prevproject10:hover{transform: scale(1.1);}
    #nextproject10:hover{transform: scale(1.1);}

body{display: grid;}
.main {
    grid-area: main;
    background-color: #ecdec9;
    padding: 3.9vh;
    vertical-align: top;
    width: 100%;
    height: auto;
    display: grid;
}


    /* :hover */
/* grid-area: aside-one; */
    /* grid-template-areas:
"header header header header header"
"sbhead sbhead sbhead sbhead sbhead"
"aside-one main main main aside-two"
"aside-one main main main aside-two"
"footer footer footer footer footer"; */